<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-bar">
      <input
        type="text"
        placeholder="搜索加油站"
        class="search-input"
        v-model="searchQuery"
        @confirm="onSearch"
      />
      <button class="search-button" @click="onSearch">搜索</button>
    </view>

    <!-- 地图模式切换 -->
    <view class="map-toggle">
      <text>综合</text>
      <switch @change="onMapToggle" />
    </view>

    <!-- 加油站列表 -->
    <view class="station-list">
      <view class="station-item" v-for="(station, index) in stations" :key="index">
        <view class="station-info">
          <image class="station-image" :src="station.image" mode="aspectFill" />
          <view class="station-details">
            <text class="station-name">{{ station.name }}</text>
            <text class="station-price">¥{{ station.price }}/升</text>
            <text class="station-discount">{{ station.discount }}</text>
            <text class="station-distance">{{ station.distance }}m</text>
            <text class="station-address">{{ station.address }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>


<script setup>
import { ref } from 'vue';

// 模拟数据
const stations = ref([
  {
    name: '中国石油加油站',
    price: 5.97,
    discount: '满200减20',
    distance: 44,
    address: '山阳区人民中路32号',
    image: '/static/station1.jpg', // 替换为你的图片路径
  },
  {
    name: '中国石油加油站',
    price: 5.97,
    discount: '满200减20',
    distance: 44,
    address: '山阳区人民中路32号',
    image: '/static/station2.jpg', // 替换为你的图片路径
  },
  {
    name: '中国石油加油站',
    price: 5.97,
    discount: '满200减20',
    distance: 44,
    address: '山阳区人民中路32号',
    image: '/static/station3.jpg', // 替换为你的图片路径
  },
]);

// 搜索框绑定的值
const searchQuery = ref('');

// 搜索功能
const onSearch = () => {
  console.log('搜索内容：', searchQuery.value);
  // 这里可以添加搜索逻辑
};

// 地图模式切换
const onMapToggle = (e) => {
  console.log('地图模式切换：', e.detail.value);
  // 这里可以添加地图模式切换逻辑
};
</script>





<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

/* 搜索框 */
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.search-input {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  border: none;
  outline: none;
}

.search-button {
  margin-left: 10rpx;
  font-size: 32rpx;
  color: #ff5722;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* 地图模式切换 */
.map-toggle {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.map-toggle text {
  font-size: 32rpx;
  color: #333;
  margin-right: 10rpx;
}

/* 加油站列表 */
.station-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.station-item {
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.station-info {
  display: flex;
  align-items: center;
}

.station-image {
  width: 150rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.station-details {
  flex: 1;
}

.station-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.station-price {
  font-size: 32rpx;
  color: #ff5722;
  margin-bottom: 10rpx;
}

.station-discount {
  font-size: 28rpx;
  color: #2196f3;
  margin-bottom: 10rpx;
}

.station-distance {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.station-address {
  font-size: 28rpx;
  color: #666;
}
</style>
